<template>
    <view class="bank-icon-components-container">
		<view class="bank-icon-title-container">图标</view>
		<view class="bank-icon-content-container">
			<view class="bank-icon-item-container" v-for="(item, index) in bankArr" :key="index">
				<!--  由于银行卡图标无法显示，07-29 修改 只显示账户类型图标，不包含银行卡了 -->
			<!-- <view class="bank-icon-item-container" v-for="(item, index) in bankIconArr" :key="index"> -->
				<view :class="['bank-icon-bgc-container', {'select-bgc-border': selectIconIndex == index}]"  @click="selectBankIcon(index, item)">
					<view :class="['bank-icon ', 'iconfont ', item.icon]" :style="{color: item.color}"></view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
    export default {
		props: {
			// 选中的颜色
			selectIconIndex: {
				type: Number,
				default: -1,
			}
		},
        data() {
            return {
				bankArr: [],
				isShowColor: false,															// 展示颜色选择组件
				iconCategorysList: this.iconCategoryList,									// 所有的图标
				bgcColor: this.themeYellowColor,
            }
        },
		methods: {
			/** 选择图标函数
			 * @param {Object} index 图标所在集合索引
			 * @param {Object} item 对象（包含名字，图标，颜色）
			 */
			selectBankIcon(index, item) {
				this.$emit("selectBankIcon", index, item);
			}
		},
		mounted() {
			this.bankArr = [];
			// bankIconArr
			this.accountArr.forEach(item => this.bankArr.push(...item.list));
			// console.log(this.bankIconArr, "12321");
			// this.bankArr.push(...this.bankIconArr);
			console.log(this.bankArr, "123");
			// console.log('账户', this.accountArr);
			// console.log('12312321', this.bankIconArr);
			// console.log('2222222', this.bankArr);
		},
    }
</script>

<style lang="scss">
	// 上面的 x 和 标题 
	.bank-icon-components-container {
		width: 670rpx;
		height: 740rpx;
		padding: 30rpx 0rpx;
		box-sizing: border-box;
		
		.bank-icon-title-container {
			width: 100%;
			height: 80rpx;
			color: $themePurpleColor;
			font-size: 30rpx;
			padding: 0rpx 30rpx;
			line-height: 80rpx;
			
		}
		
		.bank-icon-content-container {
			width: 100%;
			display: grid;
			grid-template-columns: repeat(5, 1fr);
			gap: 20rpx;
			
			// 每个图标父盒子
			.bank-icon-item-container {
				width: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
				
				// 圆背景盒子
				.bank-icon-bgc-container {
					width: 72rpx;
					height: 70rpx;
					border-radius: 50%;
					display: flex;
					justify-content: center;
					align-items: center;
					background-color: $themeBgcLightGreyColor;
					box-sizing: border-box;
					// 每个图标
					.bank-icon {
						font-size: 40rpx;
					}
				}
				
				.select-bgc-border {
					border: 1rpx solid #4d4f91;
				}
			}
		}
	}
	
	.selected-icon {
		background-color: $themeYellowColor;
		color: white;
	}
	
	.not-selected-icon {
		background-color: $themeLightGreyColor;
		color: $themeDeepGreyColor;
	}
</style>
